<template>
  <div class="main">
    <div class="body">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <ul>
            <li>
              <span>员工编号：</span><el-input v-if="isinput" v-model="driverdata.id " disabled placeholder="请输入内容" style="width:60%" />
              <span v-else>{{ driverdata.id }}</span>
            </li>
            <li>
              <span>司机名称：</span><el-input v-if="isinput" v-model="driverdata.name " disabled placeholder="请输入内容" style="width:60%" />
              <span v-else>{{ driverdata.name }}</span>
            </li>
            <li>
              <span> 所属机构：</span><el-input v-if="isinput" v-model="driverdata.agency.name " disabled placeholder="请输入内容" style="width:60%" />
              <span v-else>{{ driverdata.agency.name }}</span>
            </li>
          </ul>
          <ul>
            <li>
              <span> 电话：</span><el-input v-if="isinput" v-model="driverdata.mobile " disabled placeholder="请输入内容" style="width:60%" />
              <span v-else>{{ driverdata.mobile }}</span>
            </li>
            <li>
              <span> 年龄：</span><el-input v-if="isinput" v-model="driverdata.age " placeholder="请输入内容" style="width:60%" />
              <span v-else>{{ driverdata.age }}</span>
            </li>
            <li />
          </ul>
          <div class="button">
            <el-button v-if="isinput" type="danger" @click="queren">确认</el-button>
            <el-button v-if="isinput" type="danger" @click="quxiao">取消</el-button>
            <el-button v-else type="danger" @click="edit">编辑</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="驾驶证信息" name="second">
          <ul>
            <li>
              <span> 驾驶证号：</span>
              <el-input v-if="isinput" v-model="cardata.licenseNumber " placeholder="请输入内容" style="width:50%" />
              <span v-else>{{ cardata.licenseNumber }}</span>
            </li>
            <li>
              <span> 准驾车型：</span><el-input v-if="isinput" v-model="cardata.allowableType " placeholder="请输入准驾车型" style="width:50%" />
              <span v-else>{{ cardata.allowableType }}</span>
            </li>
            <li>
              <span> 初次领证日期：</span>
              <!-- <el-input v-if="isinput" v-model="cardata.initialCertificateDate" placeholder="请输入内容" style="width:50%" /> -->
              <el-date-picker
                v-if="isinput"
                v-model="cardata.initialCertificateDate"
                style="width:50%"
                type="date"
                placeholder="请选择日期"
              />
              <span v-else>{{ cardata.initialCertificateDate }}</span>
            </li>
          </ul>
          <ul>
            <li>
              <span> 驾驶证有效期限：
                <el-input
                  v-if="isinput"
                  v-model="cardata.validPeriod"
                  maxlength="3"
                  style="width:50%"
                  placeholder="请输入驾驶证有效期限"
                >
                  <span slot="suffix" style="color:black" class="el-input__icon">年</span>
                </el-input>
                <span v-else>{{ cardata.validPeriod }}年</span>
              </span></li>
            <li>
              <span> 驾龄：</span><el-input
                v-if="isinput"
                v-model="cardata.driverAge "
                maxlength="3"
                style="width:50%"
                placeholder="请输入驾龄"
              >
                <span slot="suffix" style="color:black" class="el-input__icon">年</span>
              </el-input>
              <span v-else>{{ cardata.driverAge }}年</span>
            </li>
            <li>
              <!-- eslint-disable-next-line vue/valid-v-model -->
              <span> 驾驶证类型：</span><el-input v-if="isinput" v-model="cardata.licenseType[0]" placeholder="请输入驾驶证类型" style="width:50%" />
              <span v-else>{{ cardata.licenseType[0] }}</span>
            </li>
          </ul>
          <ul>
            <li>
              <span> 从业资格证：</span><el-input v-if="isinput" v-model="cardata.qualificationCertificate" placeholder="请输入从业资格证" style="width:50%" />
              <span v-else>{{ cardata.qualificationCertificate }}</span>
            </li>
            <li>
              <span> 入场证信息：</span><el-input v-if="isinput" v-model="cardata.passCertificate" placeholder="请输入入场证信息" style="width:50%" />
              <span v-else>{{ cardata.passCertificate }}</span>
            </li>
            <li />
          </ul>
          <ul>
            <li style="align-items:flex-start!important">
              <div style="width:100px">图片信息</div>
              <span>
                <div class="image-container">
                  <div class="mock"><i class="el-icon-zoom-in" @click="openpic" /></div>
                  <img src="../../../assets/assets/map.png" alt="Your Image">
                </div>
                <div class="image-container">
                  <div class="mock"><i class="el-icon-zoom-in" @click="openpic" /></div>
                  <img src="../../../assets/assets/map.png" alt="Your Image">
                </div>

                <el-upload
                  v-if="isinput"
                  :before-upload="beforeAvatarUpload"
                  :http-request="uploadImage"
                  action=""
                  list-type="picture-card"
                >
                  <i class="el-icon-plus" />
                </el-upload>
                <el-dialog v-if="isinput" :visible.sync="dialogVisible">
                  <img width="100%" :src="url" alt="">
                </el-dialog>
                <!-- <img src="../../../assets/assets/map.png" alt=""> -->
                <!-- <img src="../../../assets/assets/map.png" alt=""> -->
              </span>

              <!-- <el-input v-if="isinput" v-model="cardata.passCertificate" placeholder="请输入内容" style="width:50%" /> -->
              <!-- <img v-else :src="cardata.picture"> -->
            </li>
          </ul>
          <div class="button">
            <el-button v-if="isinput" type="danger">确认</el-button>
            <el-button v-if="isinput" type="danger" @click="quxiao">取消</el-button>
            <el-button v-else type="danger" @click="edit">编辑</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog
      :visible.sync="ispic"
      width="40%"
      title=""
    >
      <!-- :before-close="handleClose" -->
      <img src="../../../assets/assets/map.png" alt="" style="width:100%;height:100%">
    </el-dialog>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
const cos = new COS({
  SecretId: 'AKID1yqzJTWQ6ZbaO0NgrriPuHEh5IMRQK8s',
  SecretKey: 'mQs67xeATYUI2e9Vhy51oXp1a2IMFxSl'
}) // 完成cos对象的初始化
// 选择图片上传
import { getOnedriver, editOnedriver, getOnedcard } from '@/api/driver'
export default {
  data() {
    return {
      url: '',
      dialogImageUrl: '',
      dialogVisible: false,
      ispic: false,
      linshi: {},
      isinput: false,
      driverdata: { agency: '' },
      cardata: { licenseType: [] },
      activeName: 'first',
      id: this.$route.params.id
    }
  },
  created() {
    this.getOnedriver()
    this.getOnedcard()
  },
  methods: {
    // 上传前校验
    beforeAvatarUpload(file) {
      // 白名单判断
      console.log(file)
      const isJPG = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp'].includes(file.type)
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 图片 格式!')
        return false
      }
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
        return false
      }
    }, uploadImage(e) {
      // console.log(e)
      cos.putObject({
        Bucket: 'local-1320584039', // 存储桶名称
        Region: 'ap-guangzhou', // 地域名称
        Key: e.file.name, // 文件名称
        StorageClass: 'STANDARD', // 固定值
        Body: e.file // 文件对象
      }, (err, data) => {
        if (!err) {
          // 拿到了腾讯云返回的地址
          // 通过input自定义事件将地址传出去
          console.log(data)
          // this.$emit('input', 'http://' + data.Location) // 将地址返回了
          this.url = 'http://' + data.Location
        }
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    async getOnedcard() {
      const res = await getOnedcard(this.id)
      console.log(res)
      this.cardata = res.data
    },
    async getOnedriver() {
      // console.log(this.id)
      const res = await getOnedriver(this.id)
      this.driverdata = res.data
      // console.log(this.driverdata)
    },
    async editOnedriver() {
      const { age, picture, mobile, name, id, userId, workStatus } = this.driverdata
      const res = await editOnedriver({ age, avatar: picture, mobile, name, userId, workNumber: id, workStatus })
      console.log(res)
    },

    handleClick() { this.isinput = false },
    edit() {
      this.isinput = true
      this.linshi.age = this.driverdata.age
    },
    quxiao() {
      this.isinput = false
      this.driverdata.age = this.linshi.age
    },
    queren() {
      this.editOnedriver()
    },
    openpic() {
      this.ispic = true
    }

  }

}
</script>

<style lang="scss" scoped>
li{
  list-style: none;
}
.main{
padding: 0 20px;
.body{
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 10px;
  ul{
    display: flex;
    li{
      flex: 1;
      display: flex;
      align-items: center;
      span{
        display: flex;
           .image-container {
                   position: relative;
                   display: inline-block;
                   margin: 10px;
                       .mock{
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            border-radius: 10px;
                            background-color: rgba(0, 0, 0, 0.5); /* 遮罩层的颜色和透明度 */
                            opacity: 0;
                            text-align: center;
                            line-height: 160px;
                              i{
                               font-size: 40px;
                                color: #fff  ;
                                 cursor: pointer;
                              }
                            }
                       .mock:hover {
                       opacity: 1; /* 鼠标悬停时显示遮罩层 */
                            }
                        img {
                          display: block;
                          width: 200px;
                          height: 150px;
                          border-radius: 10px;
                             }
                        }
      }
    }

  }
  .button{
    display: flex;
    justify-content: center;

  }
}
}

</style>
